<template>
  <el-dialog
    title="修改密码"
    :visible.sync="visible"
    width="500px"
    center
    append-to-body
    @close="closeChangePassword"
  >
    <div>
      <el-form :model="passwordForm" ref="form" label-width="100px" :inline="false" size="normal" :rules="pwRules">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            ref="oldPassword"
            :type="oldPasswordType"
          />
          <span class="show-pwd" @click="showOldPwd">
            <svg-icon :icon-class="oldPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            ref="newPassword"
            :type="newPasswordType"
          />
          <span class="show-pwd" @click="showNewPwd">
            <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="重复新密码" prop="newPassword1">
          <el-input
            v-model="passwordForm.newPassword1"
            ref="newPassword1"
            :type="newPasswordType1"
          />
          <span class="show-pwd" @click="showNewPwd1">
            <svg-icon :icon-class="newPasswordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmChangePassword">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  // cpdVisible用来绑定对话框显示，使用@confirm接收密码参数
  props: ['cpdVisible'],
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (value.length < 6) {
          callback(new Error('密码不能小于6位'));
        }
        if (/^\d+$/.test(value)) {
          callback(new Error('密码不能是纯数字'));
        }
        if (this.passwordForm.newPassword1 !== '') {
          this.$refs.form.validateField('newPassword1');
        }
        callback();
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.passwordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    }
    return {
      visible: this.cpdVisible,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        newPassword1: '',
      },
      oldPasswordType: 'password',
      newPasswordType: 'password',
      newPasswordType1: 'password',
      pwRules: {
        oldPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newPassword1: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass1, trigger: 'blur' }
        ],
      }
    }
  },
  watch: {
    cpdVisible() {
      this.visible = this.cpdVisible
    }
  },
  methods: {
    showOldPwd() {
      if (this.oldPasswordType === 'password') {
        this.oldPasswordType = ''
      } else {
        this.oldPasswordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.oldPassword.focus()
      })
    },
    showNewPwd() {
      if (this.newPasswordType === 'password') {
        this.newPasswordType = ''
      } else {
        this.newPasswordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.newPassword.focus()
      })
    },
    showNewPwd1() {
      if (this.newPasswordType1 === 'password') {
        this.newPasswordType1 = ''
      } else {
        this.newPasswordType1 = 'password'
      }
      this.$nextTick(() => {
        this.$refs.newPassword1.focus()
      })
    },
    closeChangePassword() {
      this.passwordForm= {
        oldPassword: '',
        newPassword: '',
        newPassword1: ''
      }
      this.oldPasswordType = 'password'
      this.newPasswordType = 'password'
      this.newPasswordType1 = 'password'
      this.$refs.form.resetFields()
      this.$emit('update:cpdVisible', false)
    },
    confirmChangePassword() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.passwordForm)
        } else {
          return false
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .show-pwd {
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
</style>
